<template>
  <div id="Sandcastle">停止绘制</div>
  <div id="cameraInfo">相机视角和姿态</div>
  <div id="cesiumContainer" class="fullSize"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
import CesiumNavigation from 'cesium-navigation-es6';

import { CesiumNavigationOptions } from './cesium/initViewer';

import MousePosition from './cesium/MousePosition';
import './Widgets/widgets.css';

// 设置cesium 静态资源路径
window.CESIUM_BASE_URL = '/';
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDkwYWVhOS0wNzI5LTQ3OTEtOWFiMC1kY2M3MTFiM2I2NWQiLCJpZCI6MTkyNTU1LCJpYXQiOjE3MDY1MTM0MTh9.YAPVHr1d7PBuWayCXM9deCxKg3AbtsXUJiVpubVS3NY';

/**
   * 
   

   在Cesium中，将相机视角移动至广州塔左上方800米，距离广州塔1000米的位置，在广州塔附近500米内随机生成6个点，每个点在不同的经纬度高度上，点的颜色随机生成。
   并使这些点以每分钟1米的速度移动，以及当鼠标点击相应的点时，在当前点上方2米处创建一个标签，标签上记录当前点被点击的次数


   */
//https://blog.csdn.net/yangwqi/article/details/106714908
/**
用定时器模拟实时获取后台数据 当取到数据后实体同时移动到目标位置 这种方式不再与Cesium时间关联 
实现效果：每秒新增一个坐标；每秒实体运动到相应正确位置且实现实体转向功能
PS：该方法实体经纬度超过正负180，90时需进行坐标计算转为正负180,90范围内的坐标后实体转向才正常；
 */

onMounted(async () => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
    // infoBox: false,
    // selectionIndicator: false,
    // shadows: true,
    // sceneMode: 2, // 初始场景模式
    // shouldAnimate: true,
  });

  cameraInfo.addEventListener(
    'click',
    function () {
      console.log('hello wrold', viewer.camera);
    },
    false
  );

  // 广州塔的位置坐标
  var guangzhouTowerPosition = Cesium.Cartesian3.fromDegrees(
    113.330912,
    23.112365
  );

  // 将相机位置设置为广州塔左上方800米、距离广州塔1000米的位置
  var cameraPosition = Cesium.Cartesian3.add(
    guangzhouTowerPosition,
    new Cesium.Cartesian3(-800, 800, 1000),
    new Cesium.Cartesian3()
  );
  viewer.camera.position = cameraPosition;

  // 将相机视角朝向广州塔
  viewer.camera.lookAt(guangzhouTowerPosition, new Cesium.Cartesian3(0, 0, 1)); // 设置视角朝上方向为正上方

  // 创建用于显示相机位置的点实体
  var cameraPositionEntity = viewer.entities.add({
    position: viewer.camera.position,
    point: {
      pixelSize: 10,
      color: Cesium.Color.YELLOW,
    },
  });

  // 创建用于显示相机方向的辅助线实体
  var cameraDirectionEntity = viewer.entities.add({
    polyline: {
      positions: [
        viewer.camera.position,
        Cesium.Cartesian3.add(
          viewer.camera.position,
          viewer.camera.direction,
          new Cesium.Cartesian3(1000, 0, 0)
        ),
      ],
      width: 2,
      material: Cesium.Color.RED,
    },
  });

  // 更新实体的位置和方向
  viewer.scene.preRender.addEventListener(function () {
    // 更新相机位置实体
    cameraPositionEntity.position = viewer.camera.position;

    // 更新相机方向辅助线实体
    var directionVector = viewer.camera.direction;
    var endPoint = Cesium.Cartesian3.add(
      viewer.camera.position,
      directionVector,
      new Cesium.Cartesian3(1000, 0, 0)
    );
    cameraDirectionEntity.polyline.positions = [
      viewer.camera.position,
      endPoint,
    ];
  });
  // 随机生成6个点
  // var points = [];
  // for (var i = 0; i < 6; i++) {
  //   var randomDistance = Math.random() * 500; // 0到500之间的随机距离
  //   var randomHeading = Math.random() * 2 * Math.PI; // 0到2π之间的随机角度
  //   var randomHeight = Math.random() * 100; // 0到100之间的随机高度

  //   var position = Cesium.Cartesian3.fromSpherical(
  //     Cesium.Spherical.fromCartesian(guangzhouTowerPosition)
  //       .setRadius(randomDistance)
  //       .heading(randomHeading)
  //   );
  //   Cesium.Cartesian3.add(
  //     position,
  //     new Cesium.Cartesian3(0, 0, randomHeight),
  //     position
  //   );

  //   var color = Cesium.Color.fromRandom();

  //   var point = viewer.entities.add({
  //     position: position,
  //     point: {
  //       pixelSize: 10,
  //       color: color,
  //     },
  //   });

  //   points.push(point);
  // }
});
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
#cesiumContainer {
  height: 90vh;
  width: 90vw;
}
</style>
